const React = require('react');
const BaseDemo = require('./BaseDemo');
const Affix = require('Affix');
const Button = require('Button');
const Tile = require("./Tile");


let Tab1 = React.createClass({
    render(){
        return(<span>Tab1</span>);
    }
});

let Tab2 = React.createClass({
    render(){
        return(<span>Tab2</span>);
    }
});

class TabPage extends BaseDemo{

    render() {

        return (
            <div className="container">
                <Tile header={"基本使用方式"}>
                    <div style={{height: "200px", overflow: "auto", border: "1px solid #ccc", position: "relative"}} id="scroll-wrap">
                        <div style={{height: "500px"}}>
                            asdasd<br/>
                            asdasd<br/>
                            asdasd<br/>
                            <Affix offsetTop="10" target="#scroll-wrap" style={{right: 0, position: "absolute"}}>
                                <Button>Affix</Button>
                            </Affix>
                        </div>
                    </div>


                    <pre className="brush: js" ref="code1">
                        {
`

`
                        }
                    </pre>


                </Tile>
            </div>
        )
    }
}

module.exports = TabPage;
